<!--
  作者：谭海军
描述：是显示作业页面
修改人：谭海军 
 -->
 <template>
  <div class="Taskbody">
    <div class="footer">
      <div class="block">
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="发布时间"
          :default-value="new Date(2010, 9, 1)"
        />
      </div>
      <div class="block2">
        <el-date-picker
          v-model="value2"
          type="date"
          placeholder="计划完成时间"
          :default-value="new Date(2010, 9, 1)"
        />
      </div>
      <div class="blockTask">
        <el-cascader :options="entryname" placeholder="项目名称" />
      </div>
      <div class="blockwork">
        <el-cascader :options="Jobtype" placeholder="作业类型" />
      </div>
      <div class="blockteacher">
        <el-cascader :options="options" placeholder="老师" />
      </div>
      <div class="selctbtn">
        <el-button type="primary" color="#3E94AD">查询</el-button>
      </div>
      <div class="startbtn"><el-button>重置</el-button></div>
    </div>
    <!-- 三个按钮 -->
    <div class="banner">
      <el-button class="smitebtn"  @click="smitebtnpf1"
        >待提交</el-button
      >
      <el-button class="smitebtn2" @click="smitebtnpf2">待批复</el-button>
      <el-button class="smitebtn2" @click="smitebtnpf3">已批复</el-button>
    </div>
    <!-- 表单 -->
    <el-table
      :data="tableData"
      style="width: 100%; height: 280px"
      :row-class-name="tableRowClassName"
      :header-cell-style="{ background: '#c2dae2' }"
    >
      <el-table-column prop="date" label="发布时间" width="150" />
      <el-table-column prop="name" label="项目名称" width="150" />
      <el-table-column prop="topic" label="作业主题" width="150" />
      <el-table-column prop="type" label="作业类型" width="150" />
      <el-table-column prop="teacher" label="实训老师" width="150" />
      <el-table-column prop="complete" label="计划完成时间" width="150" />
      <el-table-column prop="state" label="作业完成状态" width="150" />
      <el-table-column prop="score" label="得分" width="70" />
      <el-table-column prop="operation" label="操作"
        ><el-button class="dati" @click="fill">答题</el-button></el-table-column
      >
    </el-table>
    <!-- 分页 -->
    <div>
      <el-pagination
        class="datafen"
        :page-size="1"
        :hide-on-single-page="value"
        :total="3"
        layout="prev, pager, next"
      />
    </div>
  </div>
</template>

<script>
import { reactive, ref } from "@vue/reactivity";
import { useRouter } from "vue-router";
export default {
  name: "_Task",
  methods: {
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 0) {
        return "defaul-row";
      } else {
        return "success-row";
      }
    },
  },
  setup() {
    const value1=ref("")
    const value2=ref("")
    const router = useRouter()
    const state = reactive({
      classObject: {
        background: "red",
        color: "#C2DAE2",
      },
    });
    const entryname = [
      {
        value: "consistency",
        label: "考勤系统",
      },
      {
        value: "feedback",
        label: "购票系统",
      },
    ];
    const Jobtype = [
      {
        value: "consistency",
        label: "第一次作业",
      },
      {
        value: "feedback",
        label: "第二次作业",
      },
    ];
    const options = [
      {
        value: "consistency",
        label: "王老师",
      },
      {
        value: "feedback",
        label: "张老师",
      },
    ];
    const tableData = [
      {
        date: "2016-05-03 00:01",
        name: "在线商城系统",
        topic: "完成购物车前端设计",
        type: "个人作业",
        teacher: "李老师",
        complete: "2020-06-01 00:00",
        state: "待提交",
        scor: "",
        operation: "答题",
      },
      {
        date: "2016-05-03 00:03",
        name: "在线商城系统",
        topic: "完成购物车前端设计",
        type: "个人作业",
        teacher: "李老师",
        complete: "2020-06-01 00:00",
        state: "待提交",
        scor: "",
        operation: "答题",
      },
      {
        date: "2016-05-03 00:30",
        name: "在线商城系统",
        topic: "完成购物车前端设计",
        type: "个人作业",
        teacher: "李老师",
        complete: "2020-06-01 00:00",
        state: "待提交",
        scor: "",
        operation: "答题",
      },
      {
        date: "2016-05-03 20:00",
        name: "在线商城系统",
        topic: "完成购物车前端设计",
        type: "个人作业",
        teacher: "李老师",
        complete: "2020-06-01 00:00",
        state: "待提交",
        scor: "",
        operation: "答题",
      },
      {
        date: "2016-05-03 50:00",
        name: "在线商城系统",
        topic: "完成购物车前端设计",
        type: "个人作业",
        teacher: "李老师",
        complete: "2020-06-01 00:00",
        state: "待提交",
        scor: "",
        operation: "答题",
      },
      {
        date: "2016-05-03 00:60",
        name: "在线商城系统",
        topic: "完成购物车前端设计",
        type: "个人作业",
        teacher: "李老师",
        complete: "2020-06-01 00:00",
        state: "待提交",
        scor: "",
        operation: "答题",
      },
      {
        date: "2016-05-03 00:00",
        name: "在线商城系统",
        topic: "完成购物车前端设计",
        type: "个人作业",
        teacher: "李老师",
        complete: "2020-06-01 00:00",
        state: "待提交",
        scor: "",
        operation: "答题",
      },
      {
        date: "2016-05-03 00:00",
        name: "在线商城系统",
        topic: "完成购物车前端设计",
        type: "个人作业",
        teacher: "李老师",
        complete: "2020-06-01 00:00",
        state: "待提交",
        scor: "",
        operation: "答题",
      },
    ];
    // 跳转答题页面
    function fill(){
      router.push('/task/fill')
    }

    return {
      value2,
      value1,
      state,
      options,
      entryname,
      Jobtype,
      tableData,
      fill
    };
  },
};
</script>
<style>
/* 表单 */
.success-row {
  background-color: #c2dae2 !important;
}
</style>
<style scoped>
/* 七个选择框 */
.Taskbody {
  width: 1200px;
  margin-top: 100px;
  margin-left: 50px;
}
.footer {
  display: flex;
}
.footer > div {
  padding-left: 0px;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.el-date-editor .el-input,
.el-date-editor.el-input__inner {
  width: var(--el-date-editor-width);
}
.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.block {
  width: 150px;
  padding-right: 20px;
}
.block2 {
  margin-left: 100px;
}
.blockTask {
  margin-left: 45px;
  width: 165px;
}
.blockwork {
  margin-left: 30px;
  width: 165px;
}
.blockteacher {
  margin-left: 20px;
  width: 125px;
}
.selctbtn {
  margin-left: 20px;
}
.startbtn {
  margin-left: 20px;
}
/* 三个按钮 */
.banner {
  margin-top: 25px;
  display: flex;
  width: 250px;
}
.banner > button {
  width: 200px;
  margin-left: 0px;
}
.smitebtn {
  color: black;
  background: #c2dae2;
  border-radius: 0;
  border-top-left-radius: 8px;
}
.smitebtn:active{
  background: #c2dae2;
  color: black;
}
.smitebtn2 {
  border-radius: 0;
}
.dati {
  width: 20px;
  height: 10px;
  background: #c2dae2;
  color: rgb(0, 0, 0);
}
.datafen {
  margin-left: 500px;
  margin-top: 50px;
}
</style>
